import React, { useState, useCallback, memo } from 'react'

function ComA(props) {
  console.log('render a')
  return (
    <div>
      <h1>coma</h1>
      <button onClick = { props.onClick }>加</button> { props.children }
    </div>
  )
}
const ComAA = memo(ComA)
function ComB(props) {
  console.log('render b')
  return (
    <div>
      <h1>comb</h1>
      <button onClick = { props.onClick }>加</button> { props.b }
    </div>
  )
}
const ComBB = memo(ComB) // memo 生成一个新的 组件 
function App() {
  const [ a, setA ] = useState(11)
  const addComa = useCallback(() => {
    setA(a + 1)
  }, [a])

  const [ b, setB ] = useState(22)
  const addComb = useCallback(() => {
    setB( b + 1)
  }, [b])
  return (
    <div>
      <ComAA onClick = { addComa }>{ a }</ComAA>
      <ComBB onClick = { addComb } b = { b } ></ComBB>
    </div>
  )
}

export default App
